<script setup>
import { ref } from 'vue';

import orderMonitor from './order-monitor.vue';

const formData = ref({
  platform: '',
  symbol: '',
  price: '',
  side: '',
  amount: '',
  repeat: '',
  interval: '',
  price_up_limit: '',
  price_down_limit: '',
  buy_account: '',
  sell_account: '',
});

const submitForm = () => {
  // console.log('表单数据:', formData.value);
};
</script>

<template>
  <div class="space-y-4 p-4">
    <el-card class="flex">
      <el-form
        class="sm-hanging-form"
        :model="formData"
        :inline="true"
        label-width="90px"
      >
        <!-- 第一行 -->
        <el-row>
          <el-col :xs="24" :sm="12">
            <el-form-item label="平台">
              <el-input v-model="formData.platform" placeholder="请输入平台" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12">
            <el-form-item label="交易对">
              <el-input v-model="formData.symbol" placeholder="请输入交易对" />
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 第二行 -->
        <el-row>
          <el-col :xs="24" :sm="12">
            <el-form-item label="价格">
              <el-input v-model="formData.price" placeholder="请输入价格" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12">
            <el-form-item label="买卖方向">
              <el-input v-model="formData.side" placeholder="请输入买卖方向" />
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 第三行 -->
        <el-row>
          <el-col :xs="24" :sm="12">
            <el-form-item label="数量">
              <el-input v-model="formData.amount" placeholder="请输入数量" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12">
            <el-form-item label="重复次数">
              <el-input
                v-model="formData.repeat"
                placeholder="请输入重复次数"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 第四行 -->
        <el-row>
          <el-col :xs="24" :sm="12">
            <el-form-item label="间隔时间">
              <el-input
                v-model="formData.interval"
                placeholder="请输入间隔时间"
              />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12">
            <el-form-item label="价格上限">
              <el-input
                v-model="formData.price_up_limit"
                placeholder="请输入价格上限"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 第五行 -->
        <el-row>
          <el-col :xs="24" :sm="12">
            <el-form-item label="价格下限">
              <el-input
                v-model="formData.price_down_limit"
                placeholder="请输入价格下限"
              />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12">
            <el-form-item label="买入账户">
              <el-select
                v-model="formData.buy_account"
                multiple
                placeholder="请选择买入账户"
              >
                <el-option label="账户1" value="account1" />
                <el-option label="账户2" value="account2" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 第六行 -->
        <el-row>
          <el-col :xs="24" :sm="12">
            <el-form-item label="卖出账户">
              <el-select
                v-model="formData.sell_account"
                multiple
                placeholder="请选择卖出账户"
              >
                <el-option label="账户1" value="account1" />
                <el-option label="账户2" value="account2" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="flex justify-center">
        <el-button class="flex-1" type="primary" @click="submitForm">
          挂单
        </el-button>
        <el-button class="flex-1" type="primary" @click="submitForm">
          全撤
        </el-button>
        <el-button class="flex-1" type="primary" @click="submitForm">
          撤买
        </el-button>
        <el-button class="flex-1" type="primary" @click="submitForm">
          撤卖
        </el-button>
      </div>
    </el-card>

    <orderMonitor />
  </div>
</template>

<style lang="scss" scoped>
.sm-hanging-form {
  --iceberg-form-width: 220px;

  .el-input {
    --el-input-width: var(--iceberg-form-width);
  }

  .el-select {
    --el-select-width: var(--iceberg-form-width);
  }

  .el-input-number {
    width: var(--iceberg-form-width);
  }

  .el-switch {
    width: var(--iceberg-form-width);
  }
}
</style>
